<html>
	<head>
		<style type="text/css">
		</style>
		<link rel=StyleSheet href="styles.css" type="text/css">
	
		<script type="text/javascript">
			<!--
				var controller = null;
			
				function AutoSuggestControl() 
				{
					this.layer = document.createElement("div");
					this.layer.className = "suggestions";
					this.textbox = document.searchBar.q;
					this.root = document.searchBar.appendChild(this.layer);
					this.highlightedIndex = -1;
					this.lastValue = "";
					this.layer.style.visibility = "hidden";
				}
				
				AutoSuggestControl.prototype.hideSuggestions = function () 
				{
					this.layer.style.visibility = "hidden";
				};
				
				AutoSuggestControl.prototype.showSuggestions = function () 
				{
					this.layer.style.visibility = "visible";
				};
				
				AutoSuggestControl.prototype.setHighlightIndex = function ( index )
				{
					if (index >= 0 && index < this.root.childNodes.length)
					{
						if (this.highlightedIndex >= 0 && this.highlightedIndex < this.root.childNodes.length)
						{
							this.root.childNodes[this.highlightedIndex].className = "";
						}
						
						this.highlightedIndex = index;
						this.root.childNodes[this.highlightedIndex].className = "current";
						document.searchBar.q.value = this.root.childNodes[this.highlightedIndex].innerHTML;
					}
				}
				
				AutoSuggestControl.prototype.moveHighlightUp = function ()
				{
					if (this.highlightedIndex == -1)
					{
						this.highlightedIndex = this.root.childNodes.length - 1;
						this.root.childNodes[this.highlightedIndex].className = "current";
						document.searchBar.q.value = this.root.childNodes[this.highlightedIndex].innerHTML;
					}
					else if (this.highlightedIndex == 0)
					{
						this.root.childNodes[this.highlightedIndex].className = "";
						this.highlightedIndex = -1;
						document.searchBar.q.value = this.lastValue;
					}
					else if (this.highlightedIndex > 0)
					{
						this.root.childNodes[this.highlightedIndex].className = "";
						this.highlightedIndex--;
						this.root.childNodes[this.highlightedIndex].className = "current";
						document.searchBar.q.value = this.root.childNodes[this.highlightedIndex].innerHTML;
					}
				}
				
				AutoSuggestControl.prototype.moveHighlightDown = function ()
				{
					if (this.highlightedIndex == this.root.childNodes.length - 1)
					{
						this.root.childNodes[this.highlightedIndex].className = "";
						this.highlightedIndex = -1;
						document.searchBar.q.value = this.lastValue;
					}
					else if (this.highlightedIndex < this.root.childNodes.length - 1)
					{
						if (this.highlightedIndex != -1)
						{
							this.root.childNodes[this.highlightedIndex].className = "";
						}
						this.highlightedIndex++;
						this.root.childNodes[this.highlightedIndex].className = "current";
						document.searchBar.q.value = this.root.childNodes[this.highlightedIndex].innerHTML;
					}
				}
				
				AutoSuggestControl.prototype.createDropDown = function () 
				{
					if (this.lastValue != document.searchBar.q.value)
					{
						// only recreate drop down if text changed
						this.hideSuggestions();
						this.highlightedIndex = -1;
						this.layer.style.width = this.textbox.offsetWidth;
					
						// remove old suggestion data
						while (this.root.firstChild) 
						{
						  this.root.removeChild(this.root.firstChild);
						}

						// add new suggestion data
						var suggestions = getGoogleSuggestResults( document.searchBar.q.value );
						for (i = 0; i < suggestions.length; i++)
						{
							var newdiv = document.createElement("div");
							newdiv.innerHTML = suggestions[i];
							newdiv.className = "";
							newdiv.onclick = function() { submitSearchBarForm(); }
							newdiv.onmouseover = Function("setHighlight('"+i+"');");
							this.root.appendChild(newdiv);
						}
					
						this.showSuggestions();
						//more code to come
						
						this.lastValue = document.searchBar.q.value;
					}
				};

				function getGoogleSuggestResults( query )
				{
					var url = "http://localhost:8080/eBay/suggest?q=" + escape(query);
					
					var connection = new XMLHttpRequest();
					connection.open("GET", url, false);
					connection.send();
				    
				   	xmlDoc = connection.responseXML;
				   	
				   	var suggestions = xmlDoc.getElementsByTagName("suggestion");
				   	var ret = new Array();
				   	
				   	for (i = 0; i < suggestions.length; i++)
				   	{
				   		ret[i] = suggestions[i].getAttribute("data");
				   	}
				   	
				   	return ret;
				}
				
				function processEvent( e )
				{
					var reload = false;
					var keynum
					var keychar
					var numcheck

					if(window.event) // IE
					{
						keynum = e.keyCode
					}
					else if(e.which) // Netscape/Firefox/Opera
					{
						keynum = e.which
					}
					
					switch (keynum)
					{
					case 40:
						// down arrow
						controller.moveHighlightDown();
						break;
					case 38:
						// up arrow
						controller.moveHighlightUp();
						break;
					case 13:
						// enter key
						reload = true;
						break;
					default:
						controller.createDropDown();
						break;
					}
					
					return reload;
				}
			
				function loadPage() {
					populateSearchBar();
					parseSearchResult();
					
					disablePrevious();
					disableNext();
					
					controller = new AutoSuggestControl();
				}
				
				function showSuggest( boolVal )
				{
					if (boolVal)
					{
						controller.ShowSuggestions();
					}
					else
					{
						controller.HideSuggestions();
					}
				}
				
				function setHighlight( index )
				{
					controller.setHighlightIndex( index );
				}
				
				function submitSearchBarForm()
				{
					document.forms["searchBar"].submit();
				}
				
				function parseSearchResult()
				{
					var json = <%= request.getAttribute("result") %>;
					
					var results_table = document.getElementById("searchResults");
					var i = <%= request.getParameter("numResultsToSkip") %> + 1;
					for (var key in json) {
						var row = results_table.insertRow(-1);
						var row_num = row.insertCell(0);
						var row_txt = row.insertCell(1);
						
						row_num.innerHTML = i;
						row_txt.innerHTML = "<a href=\"" + "/eBay/item?id=" + key + "\">" + json[key] + "<\a>";
						
						i += 1;
					}
				}
				
				function populateSearchBar() {
					document.searchBar.q.value = "<%= request.getParameter("q") %>";
				}
				
				function disablePrevious() {
					if (<%= request.getAttribute("returned") %> == 0 || <%= request.getParameter("numResultsToSkip") %> == 0)
						document.previous.previous.disabled = "disabled";
				}
				
				function disableNext() {
					if (<%= request.getAttribute("returned") %> < <%= request.getParameter("numResultsToReturn") %> )
						document.next.next.disabled = "disabled";
				}
			-->
		</script>
		
		<title>Keyword Search</title>
	</head>
	
	<body onLoad="loadPage()">
		<table id="results_widget">
			<tr>
				<td colspan="2">
					<form action="/eBay/search" method="GET" id="searchBar" name="searchBar">
						Search:  <input name="q" type="text" onkeyup="return processEvent(event);" autocomplete="off""/>
						<input name="numResultsToSkip" type="hidden" value="0" />
						<input name="numResultsToReturn" type="hidden" value="20" />
						<input name="search" type="submit" />
					</form>
				</td>
			</tr>
			
			<tr>
				<td colspan="2">
					<table id="searchResults">
						<thead>
							Search Results
						</thead>
					</table>
				</td>
			</tr>
			
			<tr id="nav_bar">
				<td>
					<form action="/eBay/search" method="GET" name="previous">
						<input name="q" type="hidden" value="<%= request.getParameter("q") %>" />
						<input name="numResultsToSkip" type="hidden" value="<%= Integer.parseInt(request.getParameter("numResultsToSkip")) - 20 %>" />
						<input name="numResultsToReturn" type="hidden" value="20" />
						<input name="previous" type="submit" value="Previous" />
					</form>
				</td>
				
				<td>
					<form action="/eBay/search" method="GET" name="next">
						<input name="q" type="hidden" value="<%= request.getParameter("q") %>" />
						<input name="numResultsToSkip" type="hidden" value="<%= Integer.parseInt(request.getParameter("numResultsToSkip")) + 20 %>" />
						<input name="numResultsToReturn" type="hidden" value="20" />
						<input name="next" type="submit" value="Next" />
					</form>
				</td>
			</tr>
		</table>
	</body>
</html>
